<template>
  <div>
    <SForm :form="form" layout="inline" :form-items="formItems" :colon="false" />
    <create-form
      ref="createModal"
      :visible="visible"
      :loading="confirmLoading"
      :model="mdl"
      @cancel="handleCancel"
      @ok="handleOk"
    />
  </div>
</template>

<script>
import moment from 'moment'
import { SForm, SSelect, SDatePicker } from '@/components'
import TagCheckboxList from './TagCheckboxList'
import CreateForm from './CreateForm'
const searchOptions = [
  {
    value: 'search1',
    title: '订单编号'
  }, {
    value: 'search2',
    title: '商品名称'
  }, {
    value: 'search3',
    title: '商品编号'
  }, {
    value: 'search4',
    title: '客户昵称'
  }, {
    value: 'search5',
    title: '收货人姓名'
  }, {
    value: 'search6',
    title: '收货人手机'
  }, {
    value: 'search7',
    title: '支付单号'
  }, {
    value: 'search8',
    title: '提货码'
  }, {
    value: 'search9',
    title: '自提点名称'
  }
]

const dateOptions = [
  {
    value: 'create',
    title: '下单时间'
  }, {
    value: 'payment',
    title: '支付时间'
  }, {
    value: 'delivery',
    title: '发货时间'
  }
]

export default {
  name: 'Form',
  components: {
    SForm,
    CreateForm
  },
  filters: {
  },
  data() {
    this.form = this.$form.createForm(this, { name: 'test' })
    this.advanced = false
    this.filterData = [
      {
        label: '商品类型',
        field: 'label1',
        active: true,
        option: [
          {
            label: '实物商品',
            field: 'label2',
            active: false
          },
          {
            label: '预售商品',
            field: 'label3',
            active: false
          },
          {
            label: '虚拟商品',
            field: 'label4',
            active: false
          }
        ]
      },
      {
        label: '订单状态',
        field: 'label5',
        active: true,
        option: [
          {
            label: '已取消',
            field: 'label6',
            active: false
          },
          {
            label: '待支付',
            field: 'label7',
            active: false
          },
          {
            label: '待发货/待备货',
            field: 'label8',
            active: false
          },
          {
            label: '已发货/待提货',
            field: 'label9',
            active: false
          },
          {
            label: '已完成',
            field: 'label10',
            active: false
          }
        ]
      },
      {
        label: '支付方式',
        field: 'label11',
        active: true,
        option: [
          {
            label: '微信支付',
            field: 'label12',
            active: false
          },
          {
            label: '线下支付',
            field: 'label13',
            active: false
          }
        ]
      },
      {
        label: '配送方式',
        field: 'label14',
        active: true,
        option: [
          {
            label: '商家配送',
            field: 'label15',
            active: false
          },
          {
            label: '到点自提',
            field: 'label16',
            active: false
          }
        ]
      }
    ]
    this.formItems = [
      {
        slot: true,
        content: <a-col md={4} sm={24}>
                    筛选条件
        <a-switch onChange={() => this.toggleAdvanced()} />
        </a-col>
      },
      {
        label: {
          id: 'dateType',
          options: { initialValue: 'create' },
          style: { width: '30%' },
          content: (
            <SSelect setStyle={{ width: '100%' }} form={this.form} formOptions={{ initialValue: 'create' }} options={dateOptions} formItemId='dateType' />
          )
        },
        id: 'date',
        options: { initialValue: [] },
        style: { width: '70%' },
        content: <SDatePicker
          setStyle={{ width: 'auto' }}
          show-time
          value-format='YYYY-MM-DD HH:mm:ss'
          ranges={{
            '今天': [moment().startOf('day'), moment().endOf('day')],
            '昨天': [moment().add(-1, 'days').startOf('day'), moment().add(-1, 'days').endOf('day')],
            '最近7天': [moment().add(-6, 'days').startOf('day'), moment().endOf('day')],
            '最近30天': [moment().add(-29, 'days').startOf('day'), moment().endOf('day')],
            '这个月': [moment().startOf('month'), moment().endOf('month')],
            '上个月': [moment().add(-1, 'month').startOf('month'), moment().add(-1, 'month').endOf('month')]
          }}
          form={this.form} formItemId='date' formOptions={{ initialValue: [] }} />,
        col: { md: 10, sm: 24 }
      },
      {
        label: {
          id: 'searchType',
          options: { initialValue: 'search1' },
          style: { width: '30%' },
          content: (
            <SSelect setStyle={{ width: '100%' }} form={this.form} formOptions={{ initialValue: 'search1' }} options={searchOptions} formItemId='searchType' />
          )
        },
        id: 'keyword',
        options: {},
        style: { width: '70%' },
        content: <a-input-search style='top: -3px;' placeholder='关键字' enter-button />,
        col: { md: 10, sm: 24 }
      },
      {
        slot: true,
        content: <div>
          <TagCheckboxList ref='TagCheckboxList' data={this.filterData} form={this.form} advanced={this.advanced}>
            <a-col slot='button' md={24} sm={24}>
              <a-button disabled>批量标记</a-button>
              <a-button style='margin-left: 8px' onClick={() => this.handleAdd()}>订单导出</a-button>
            </a-col>
          </TagCheckboxList>
        </div>
      },
      {
        content: <a-button onClick={() => this.testClick()}>aaaa</a-button>,
        col: { md: 10, sm: 24 }
      }
    ]
    return {
      // create model
      visible: false,
      confirmLoading: false,
      mdl: null
    }
  },
  computed: {
    // formItems(val) {
    //   return
    // }
  },
  created() {
  },
  methods: {
    moment: moment,
    testClick() {
      this.form.validateFields((errors, values) => {
        console.log(values)
      })
    },
    toggleAdvanced() {
    //   this.advanced = !this.advanced
    //   this.$set(this, 'advanced', !this.advanced)
    //   this.$set(this, 'formItems', this.formItems)
      this.$refs.TagCheckboxList.advanced = !this.$refs.TagCheckboxList.advanced
    },
    handleAdd() {
      this.mdl = null
      this.visible = true
    },
    handleOk() {
    //   const form = this.$refs.createModal.form
    //   this.confirmLoading = true
    //   form.validateFields((errors, values) => {
    //     if (!errors) {
    //       console.log('values', values)
    //       if (values.id > 0) {
    //         // 修改 e.g.
    //         new Promise((resolve, reject) => {
    //           setTimeout(() => {
    //             resolve()
    //           }, 1000)
    //         }).then(res => {
    //           this.visible = false
    //           this.confirmLoading = false
    //           // 重置表单数据
    //           form.resetFields()
    //           // 刷新表格
    //           this.$refs.table.refresh()

      //           this.$message.info('修改成功')
      //         })
      //       } else {
      //         // 新增
      //         new Promise((resolve, reject) => {
      //           setTimeout(() => {
      //             resolve()
      //           }, 1000)
      //         }).then(res => {
      //           this.visible = false
      //           this.confirmLoading = false
      //           // 重置表单数据
      //           form.resetFields()
      //           // 刷新表格
      //           this.$refs.table.refresh()

    //           this.$message.info('新增成功')
    //         })
    //       }
    //     } else {
    //       this.confirmLoading = false
    //     }
    //   })
    },
    handleCancel() {
      this.visible = false

    //   const form = this.$refs.createModal.form
    //   form.resetFields() // 清理表单数据（可不做）
    }
  }
}
</script>
<style lang="less">
</style>
